<template>

  <div class="container">

    <div class="header">
      <img class="logo" src="../../assets/img/logo.png"/>
    </div>

    <div id="navigation">

      <div class="title"><span class="span">欢迎进入！</span>openLooKeng集群管理平台</div>

      <div class="card">
        <el-input style="width:350px;margin-bottom:20px;" prefix-icon="el-icon-user" placeholder="请输入用户名" v-model="id" size="medium"></el-input>
        <el-input style="width:350px;margin-bottom:20px;" prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="pwd" type="password" size="medium" @keyup.enter.native="submitRegister"></el-input>
        <el-input style="width:350px;margin-bottom:20px;" prefix-icon="el-icon-lock" placeholder="请再次输入密码" v-model="pwdAgain" type="password" size="medium" @keyup.enter.native="submitRegister"></el-input>
        <el-button type="primary" @click="submitRegister" size="medium" style="width:350px;height:45px;font-size:24px;">注册</el-button>
        <el-button type="primary" @click="back" size="medium" style="width:350px;height:45px;font-size:24px;margin:20px 0 0;">返回</el-button>
      </div>

    </div>

  </div>
</template>
<script>
    import {register} from '@/api/index.js'

    export default {
        data ()
        {
          return {
            id: '',
            pwd: '',
            pwdAgain:'',
            idRez:/^(?:(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])).{8,18}$/,
          }
        },

        methods:
        {
            submitRegister ()
            {
                if((this.id.replace(/\s*/g,"").length<8)||(this.id.replace(/\s*/g,"").length>18))
                {
                    this.$message({
                        showClose: true,
                        message: '用户名长度需在8-18位以内',
                        type: 'warning'
                    })
                    return
                }

                if(this.id.replace(/\s*/g,"")==''||this.pwd.replace(/\s*/g,"")==''||this.pwdAgain.replace(/\s*/g,"")=='')
                {
                    this.$message({
                        showClose: true,
                        message: '用户名和密码不能为空',
                        type: 'warning'
                    })
                    return
                }

                if( (!this.idRez.test(this.pwd.replace(/\s*/g,""))) || (!this.idRez.test(this.pwdAgain.replace(/\s*/g,""))) )
                {
                    this.$message({
                        showClose: true,
                        message: '密码长度需在8-18位以内，且必须包含：大写字母，小写字母，数字',
                        type: 'warning'
                    })
                    return
                }

                if(this.pwd.replace(/\s*/g,"")!==this.pwdAgain.replace(/\s*/g,""))
                {
                    this.$message({
                        showClose: true,
                        message: '两次输入的密码不一致',
                        type: 'warning'
                    })
                    return
                }

                let obj = {account: this.id.replace(/\s*/g,""), passWord: this.pwdAgain.replace(/\s*/g,"")}
                register(obj).then((response) =>
                {
                    if (response.data.code == 0)
                    {
                        this.$message({
                            showClose: true,
                            message: '注册成功',
                            type: 'success'
                        })
                        this.$router.push({path:'/'})
                    }
                })
            },
            back()
            {
                this.$router.push({path:'/'})
            }
        },
    }
</script>
<style scoped>

    .container
    {
        width:1920px;
        height:1080px;
    }

    #navigation
    {
        width:1920px;
        height:1020px;
        display:flex;
        flex-direction:column;
        align-items:center;
        background: url("../../assets/img/bg.png") center center no-repeat;
        background-size: 100% 100%;
    }

    .flexd
    {
        position: absolute;
        width: 31%;
        height: 53%;
        background: #ffffff;
        border-radius: 5px;
        top: 20%;
        left: 50%;
    }

    .card
    {
        width:630px;
        height:413px;
        box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid rgba(229, 229, 229, 0.97);
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .span
    {
        font-size: 20px;
    }

    .title
    {
        height: 48px;
        font-size: 30px;
        font-family: PingFangSC-Medium, PingFang SC;
        line-height: 50px;
        text-align: center;
        margin: 117px 0 110px ;
    }
</style>
